<template>
	<view class="pannel" @tap="detail()">
		<view class="left"><image :src="goods.thumb" mode="widthFix"></image></view>
		<view class="right">
			<view class="title">{{ goods.name }}</view>
			<view class="tag">
				<text v-for="(item,index) in goods.tag_id" :key="index">{{item}}</text>
			</view>
			<view class="subtitle" v-if="type!=1">
				{{goods.house}}/{{goods.room_size}}平/{{goods.orientations}}/{{goods.village_name}}
			</view>
			<view class="subtitle" v-if="type!=3">{{ goods.region }}</view>
			<view class="subtitle" v-if="type==3">{{ goods.address }}</view>
			<view class="bottom">
				<block v-if="type!=3">
						<text class="money">{{ goods.total_amount }}万</text>
				<text style="margin-left: 20upx;">{{ goods.avg_price }}元/平</text>
				</block>
				<block v-else>
					<text class="money">{{ goods.rent }}元/月</text>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		goods: {
			type: Object,
			default: null
		},
		type: {
			default: null
		}
	},
	data() {
		return {};
	},
	methods: {
		detail() {
			if (this.type == 3) {
				uni.navigateTo({
					url: '/pages/house_property/rentingdetail/rentingdetail?id=' + this.goods.id
				});
			} else if (this.type == 2) {
				uni.navigateTo({
					url: '/pages/house_property/seconddetail/seconddetail?id=' + this.goods.id
				});
			} else if (this.type == 1) {
				uni.navigateTo({
					url: '/pages/house_property/propertiesdetail/propertiesdetail?id=' + this.goods.id
				});
			}
		}
	}
};
</script>

<style lang="scss">
.pannel {
	background-color: #ffffff;
	width: 100%;
	height: 220upx;
	margin-bottom: 20upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-radius: 20upx;
	overflow: hidden;
	.left {
		width: 230upx;
		height: 220upx;
		overflow: hidden;
		image {
			height: 100%;
		}
	}
	.right {
		width: calc(100% - 230upx);
		height: 100%;
		box-sizing: border-box;
		padding: 15upx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		padding-left: 20upx;
		line-height: 1.5em;
		font-size: $uni-font-size-base;
		color: $uni-color-subtitle;
		.subtitle {
			color: #999999;
			font-size: $uni-font-size-base;
		}
		.tag{
			width: 100%;
			overflow: hidden;
			height: 40upx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			text{
				height: 40upx;
				line-height: 40upx;
				margin-right: 20upx;
				padding: 0 20upx;
				border-radius: 20upx;
				background-color: rgba(243,132,50,.3);
				font-size: $uni-font-size-base;
				color: #F38432;
			}
		}
		.title {
			font-size: $uni-font-size-lg;
			color: #333333;
			font-size: $uni-font-size-lg;
		}
		.bottom {
			font-size: $uni-font-size-base;
			color: #f33632;
			.money {
				font-weight: 700;
			}
		}
	}
}
</style>
